<!DOCTYPE html>
<html lang="en-GB">

<head>
    <title>Builderstars - Post and request home repairs</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta name="keywords" content="handyman, repair, tradesman, tradesmen, find tradesmen, local tradesman, local tradesmen, local handyman, recommendation service">
    <meta name="description" content="Builderstars is a website where you can find and request repairs for free">
    <link rel="stylesheet" type="text/css" href={{ asset("public/assets/css/main.css") }}>
    <link rel="icon" href={{ asset("public/assets/img/favicon.ico") }} type="image/x-icon">
    <!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]-->
<style>
	#step-2 {
            display:none;
        }
        
        .reg-btns{
            padding:12px;
        }
        
        #reg-steps{
            width:250px;
        }
        
        #reg-steps span {
            display:inline;
            padding-right:7px;
            font-size:13px;
        }
        
        #reg-steps span:nth-child(1){
            border-right:1px solid #000;
            color:red;
        }
        
        #reg-loadbar {
            background-color:#0000ff;
            width:250px;
            border:1px solid #0000ff;
            border-radius:10px;
            height:4px;
        }
        
        #reg-form div label, input{
            display:block;
        }
        
        #ste-2 input[type="submit"], button {
            display:inline;
        }
        
        #jobs article .main-div div{
			border:none;
        	
        }
</style>
</head>

<body id="body">
    <!-- HEADER SECTION -->
    <section id="top-menu">
        <article>
            <div>
                <ul>
                    <li>
                        <a href="clients.html" title="For clients">
                            <img src={{ asset("public/assets/img/for_clients.png") }} alt="For clients" />For clients</a>
                    </li>
                    <li>
                        <a href="tradesmen.html" title="For tradesmen">
                            <img src={{ asset("public/assets/img/for_tradesmen.png") }} alt="For tradesmen" />For tradesmen</a>
                    </li>
                    <li>
                        <a href="./login" title="Go to login">
                            <img src={{ asset("public/assets/img/for_login.png") }} alt="Login">Login</a>
                    </li>
                </ul>
            </div>
        </article>
    </section>
    <section id="main-menu">
        <article>
            <header>
                <div id="under-logo">
                    <!-- CHANGE THE href of the img -->
                    <a href="./" title="Find and request house repair">
                        <img src={{ asset("public/assets/img/logo.png") }} alt="BuilderStars Logo" />
                    </a>
                </div>
                <nav>
                    <ul>
                        <li>
                            <a href="#" tittle="Go to the front page of Builderstars">Home</a>
                        </li>
                        <li>
                            <a href="#" title="Post a job you offer and attract customers">Request a repair</a>
                        </li>
                        <li>
                            <a href="#" title="Find a handyman to do your repair at home">Find a tradesman</a>
                        </li>
                        <li>
                            <a href="#" title="Find a handyman to do your repair at home">Post a job</a>
                        </li>
                        <li>
                            <a href="#" title="Builderstars Frequently asked questions" rel="noFollow">F.A.Q.</a>
                        </li>
                        <li>
                            <a href="https://www.facebook.com/BuilderStars" title="Like Builderstars on facebook" rel="noFollow" target="_blank">
                                <img src={{ asset("public/assets/img/facebook.png") }} alt="Facebook icon" />
                            </a>
                        </li>
                        <li>
                            <a href="https://plus.google.com/u/0/b/105526134367084529265/105526134367084529265/posts" target="_blank" rel="noFollow" title="Follow us on Google+">
                                <img src={{ asset("public/assets/img/googleplus.png") }} alt="GooglePlus icon" />
                            </a>
                        </li>
                        <li>
                            <a href="https://www.facebook.com/BuilderStars" title="Like Builderstars on facebook" rel="noFollow" target="_blank">
                                <img src={{ asset("public/assets/img/twitter.png") }} alt="Twitter icon" />
                            </a>
                        </li>

                    </ul>
                </nav>
            </header>
        </article>
    </section>
    <!--END HEADER SECTION-->

    <section id="main-heading">
        <article class="clearfix">
            <span>
                <h1>ONE CLICK</h1>
                <h2>CAN SOLVE</h2>

                <h3>ALL YOUR HOUSE PROBLEMS</h3>
                <h4>Request a repair
                    <em>
                        for free
                    </em>here
                </h4>
                <img src={{ asset("public/assets/img/pointer.png") }} alt="Pointer" id="pointer">
            </span>

            <div id="builder-man">
                <img src={{ asset("public/assets/img/builderMan.png") }} alt="Picture of a builder" class="clearfix" />
            </div>
        </article>

    </section>
    <!-- END MAIN HEADING SECTION -->
    <section id="jobs">
        <article class="clearfix">
            @section('login-forms')
            	
            @show
        </article>
    </section>

  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script>
    $(document).ready(function(){
    
        $("#basic-btn").click(function(){
            $("#step-1").css({"display" : "none"});
            $("#step-2").css({"display" : "block"});
            $("#reg-steps span:nth-child(1)").css({"color" : "black"});
            $("#reg-steps span:nth-child(2)").css({"color" : "red"});
        }); 
        
        $("#trades-btn").click(function(){
            $("#step-1").css({"display" : "block"});
            $("#step-2").css({"display" : "none"});
            $("#reg-steps span:nth-child(1)").css({"color" : "red"});
            $("#reg-steps span:nth-child(2)").css({"color" : "black"});
        }); 
        
        var countTrades = 0;
        var selectedTradesArr = [];
        
        $("select").on("change", function(){
                  countTrades = countTrades + 1;
                   
                  if(countTrades > 10) {
                      alert("You can't select more than 10 trades");
                  } else {
                      if(indexOf.call(selectedTradesArr, $("select option:selected").attr("value")) != -1){
                          alert('You have already selected this trade');
                      } else {
                          var tmpHtml = $("#selected-trades").html();
                          var modifiedTrade = "<span data-tradeNumber='" + $("select option:selected").attr("value") + "'>" + countTrades + ".  " + $("select option:selected").text() + "</span>";
                          $("#selected-trades").html(tmpHtml + modifiedTrade + "<br />");
                          selectedTradesArr.push($("select option:selected").attr("value"));
                      }
                  }
           
              
        });
         
        var indexOf = function(needle) {
            if(typeof Array.prototype.indexOf === 'function') {
                indexOf = Array.prototype.indexOf;
            } else {
                indexOf = function(needle) {
                    var i = -1, index = -1;

                    for(i = 0; i < this.length; i++) {
                        if(this[i] === needle) {
                            index = i;
                            break;
                        }
                    }

                    return index;
                };
            }

            return indexOf.call(this, needle);
        }; 
    });
</script>

</body>

</html>
